<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>个人中心</title>
<link type="text/css" rel="stylesheet" href="<?php echo $this->_var['css_path']; ?>/css.css"/>
<link type="text/css" rel="stylesheet" href="<?php echo $this->_var['css_path']; ?>/global.css"/>
<link rel="stylesheet" href="<?php echo $this->_var['css_path']; ?>/powerFloat.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->_var['js_path']; ?>/jcrop/jquery.Jcrop.min.css" type="text/css" />
</head>
<body>
<?php echo $this->fetch('header.html'); ?>
<div id="wrapper">
  <div id="content">
    <div id="con_le"> <?php echo $this->fetch('user_nav.html'); ?> 
    </div>
    
    <div id="con_box">
      <div class="Current"><?php echo $this->_var['position']; ?></div>
      <div class="con_top"> <?php echo $this->fetch('user_common_detail.html'); ?>
        <div class="clear"></div>
      </div>
      <div id="user_content"> <?php echo $this->fetch('message.html'); ?>
        <div id="outer" >
          <div class="jcExample">
            <form name="myform" action="<?php echo $this->_var['action_upload_avatar']; ?>" method="post" id="myform" enctype="MULTIPART/FORM-DATA" style="margin-bottom:30px;">
              上传头像：<input type="file" name="avatar" id="avatar" />
              <input type="submit" value="上传" />
            </form>
            <form action="<?php echo $this->_var['action_crop']; ?>" method="post" onsubmit="return checkCoords();">
            <div class="article" style="border:1px solid #d5d5d5;float:left;margin-right:20px;"> 
               
              <img src="<?php echo $this->_var['user_avatar']; ?>" id="cropbox"/> 
              
              
                <input type="hidden" id="x" name="x" />
                <input type="hidden" id="y" name="y" />
                <input type="hidden" id="w" name="w" />
                <input type="hidden" id="h" name="h" />
            </div>
             <div style="width:100px;height:100px;overflow:hidden;border:1px solid #000;margin-bottom:20px;"> <img src="<?php echo $this->_var['user_avatar']; ?>" id="preview" alt="Preview" class="jcrop-preview" width="100" height="100"/> </div>
      		 <input type="submit" class="button-blue" value="确 认"><br/><br/>*提示成功后，头部如没更新，请按CTRL+F5刷新浏览器
             </form>
          </div>
             <div class="clear"></div>
        </div>
      </div>
    </div>
    
    <div class="clear"></div>
  </div>
   
</div>
<?php echo $this->fetch('footer.html'); ?>
<?php echo $this->fetch('hidden_div.html'); ?> 
<script type="text/javascript" src="<?php echo $this->_var['js_path']; ?>/jquery.js"></script> 
<script type="text/javascript" src="<?php echo $this->_var['js_path']; ?>/jquery-powerFloat.js"></script> 
<script type="text/javascript" src="<?php echo $this->_var['js_path']; ?>/jquery.pngfix.js"></script> 
<script type="text/javascript" src="<?php echo $this->_var['js_path']; ?>/scrolltopcontrol.js"></script> 
<script type="text/javascript" src="<?php echo $this->_var['js_path']; ?>/myfloat.js"></script> 
<script type="text/javascript" src="<?php echo $this->_var['js_path']; ?>/My97DatePicker/WdatePicker.js"></script> 
<script type="text/javascript" src="<?php echo $this->_var['js_path']; ?>/jquery.validate.js"></script> 
<script type="text/javascript" src="<?php echo $this->_var['js_path']; ?>/message.js"></script> 
<script src="<?php echo $this->_var['js_path']; ?>/jcrop/jquery.Jcrop.min.js"></script> 
<script type="text/javascript" src="<?php echo $this->_var['js_path']; ?>/user.js"></script> 
<script>

function updateavatar() {
 location.reload(); // 第一次刷新
 jquery.cookie("avatar_refresh_<?php echo $this->_var['user_detail']['id']; ?>", 1, {
	 path:'/'
 });
}
$(function(){
	var jcrop_api, boundx, boundy;

	$('#cropbox').Jcrop({
		onChange: updatePreview,
		onSelect: updatePreview,
		aspectRatio: 1
	},function(){
		// Use the API to get the real image size
		var bounds = this.getBounds();
		boundx = bounds[0];
		boundy = bounds[1];
		// Store the API in the jcrop_api variable
		jcrop_api = this;
	});


	function checkCoords()
	{
		if (parseInt($('#w').val())) return true;
		alert('请选择要剪切的区域');
		return false;
	}


	function updatePreview(c)
	{
		$('#x').val(c.x);
		$('#y').val(c.y);
		$('#w').val(c.w);
		$('#h').val(c.h);
		if (parseInt(c.w) > 0)
		{
			var rx = 100 / c.w;
			var ry = 100 / c.h;

			$('#preview').css({
				width: Math.round(rx * boundx) + 'px',
				height: Math.round(ry * boundy) + 'px',
				marginLeft: '-' + Math.round(rx * c.x) + 'px',
				marginTop: '-' + Math.round(ry * c.y) + 'px'
			});
		}
	}
	
  });
</script>
</body>
</html>
